<template>
  <div>
    <a-row style="margin-bottom: 20px;">
      <a-col :span="8">
        <a-input v-model="searchParam"></a-input>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-upload>
          <a-button type="primary" class="btn">导入</a-button>
        </a-upload>
        <a-tree :tree-data="treeData" :show-line="true">
        </a-tree>
      </a-col>
      <a-col :span="18">
        <a-row>
          <a-col :span="16">
            <a-form :model="formData" :labelAlign="right" :label-col="{ span: 8 }">
              <a-form-item label="资源分类名称">
                <a-input v-model="formData.resourceName"></a-input>
              </a-form-item>
              <a-form-item label="层次类型">
                <a-input v-model="formData.levelType"></a-input>
              </a-form-item>
              <a-form-item label="资源分类码长度">
                <a-input v-model:number="formData.resourceLength">
                  <template #addonAfter>
                    <a-button type="text">+</a-button>
                    <a-button type="text">-</a-button>
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item label="状态">
                <a-switch checked-children="启用" un-checked-children="禁用" v-model:checked="resourceStatus"></a-switch>
              </a-form-item>
              <a-form-item label="描述">
                <a-textarea></a-textarea>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'

// 搜索框
const searchParam = ref('')
// 树形结构数据
const treeData = ref([
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
      },
    ],
  },
])
// form表单
const formData = ref({})
// 资源状态
const resourceStatus = ref(true)
</script>
<style scoped lang="less">
.btn {
  margin-bottom: 10px;
}
</style>
